<!--
	建筑物易损性综合统计（全国）
	Created by Penglei on 2023/08/10
-->
<template>
	<div class="comprehensive-statistics">
		<!-- <div class="comprehensive-statistics-item">
			<h3 class="comprehensive-statistics-title">用途</h3>
			<div id="useChartsRef" ref="useChartsRef" class="echats-box" style="height: 150px;"></div>
		</div> -->
		<div class="comprehensive-statistics-item">
			<!-- <h3 class="comprehensive-statistics-title">设防情况</h3> -->
			<div id="defenseChartsRef" ref="defenseChartsRef" class="echats-box" style="height: 200px;"></div>
		</div>
		<!-- <div class="comprehensive-statistics-item">
			<h3 class="comprehensive-statistics-title">年代</h3>
			<div id="yearChartsRef" ref="yearChartsRef" class="echats-box" style="height: 150px;"></div>
		</div> -->
	</div>
</template>

<script setup name="ComprehensiveStatistics">
// 引入echats
import * as echarts from 'echarts';
import { getCurrentInstance, onMounted } from 'vue';
// 引入接口
import { getComprehensiveStatisticsApi } from '@/api/vulnerability';
// 背景图片
import bgImg from '@/assets/images/vulnerability/bg_chart_pie.png';

// 当前实例
const { proxy } = getCurrentInstance();

// 设防情况
let arrDefense = [
	// { name: '未设防', value: 6 },
	// { name: '6度', value: 16 },
	// { name: '7度', value: 17 },
	// { name: '8度', value: 13 },
	// { name: '9度', value: 10 },
	// { name: '10度', value: 9 },
	// { name: '自设防', value: 7 },
	// { name: '其他', value: 5 },
];
const colorsDefense = ['#FF9E60', '#095CFD', '#1574F8 ', '#4F61FF', '#6ED309', '#AA78FA', '#E772CA', '#F25151'];

// 年代
let arrYear = [
	// { name: '1978年以前', value: 21 },
	// { name: '1978-1989年', value: 25 },
	// { name: '1989-2001年', value: 27 },
	// { name: '2001-2016年', value: 20 },
	// { name: '2016年以后', value: 7 },
];
const colorsYear = ['#0B5CF8', '#1574F8 ', '#4F61FF', '#AA78FA', '#FF9E60'];

// 用途
let arrUse = [];
const colorsUse = ['#6ED309', '#07CDFD', '#FF9E60'];

/*
	渲染图表
	params: {
		elem: 标签DOM,
		data: 数据,
		colors: 颜色列表,
		legendGap: 图例间距
	}
*/
const renderChart = (elem, data, colors, legendGap) => {
	let myChart = echarts.init(elem);
	const option = {
		// 颜色
		color: colors,
		// 提示
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c}%'
		},
		// 图例
		legend: {
			orient: 'vertical',
			//调节上下左右的距离达到图例位置效果
			top: 5,
			left: '60%',
			align: 'left',
			itemWidth: 6,
			itemHeight: 6,
			itemGap: legendGap || 10,
			textStyle: {
				fontSize: 14,
				color: '#FFFFFF', //#46FFFF
			},
			formatter: function (name, value) {
				const curItem = data.find(item => item.name == name) || {};
				let strValue = '';
				// if (curItem && curItem.value) {
				// 	strValue = (name && name.length == 2? '       ' : '  ') + curItem.value + '%';
				// }
				// return name + strValue;
				strValue = (name && name.length == 2? '       ' : '  ') + curItem.value + '%';
				return name + strValue;
			},
			rich: {
				a: {
					color: '#FFFFFF70',
					lineHeight: 10
				},
			}
		},
		// 图形处理
		graphic: {
			elements: [
				{
					type: 'image',
					style: {
						image: bgImg,
						width: 165,
						height: 165,
					},
					left: '32',
					top: 'center'
				}
			],
		},
		series: [
			{
				type: 'pie',
				//饼图、环形图
				radius: ['25%', '60%'],
				//饼图位置, 上下、左右
				center: ['114', '50%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				labelLine: {
					show: false
				},
				// 数据
				data: data
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 加载数据
const getData = () => {
	getComprehensiveStatisticsApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			// const {
			// 	// 用途
			// 	use,
			// 	// 年代
			// 	age,
			// 	// 设防情况
			// 	forCondition,
			// } = data;
			const forCondition = data;

			// 设防情况
			if (forCondition) {
				arrDefense.length = 0;
				let arrKeys = Object.keys(forCondition);
				if (arrKeys && arrKeys.length) {
					// 排序
					arrKeys.sort((a, b) => {
						return parseInt(a) - parseInt(b);
					})
					if (arrKeys.indexOf('未设防') > -1) {
						arrDefense.push({
							name: '未设防',
							value: forCondition['未设防']
						})
					}
					arrKeys.map(item => {
						if (item != '未设防' && item != '自设防') {
							arrDefense.push({
								name: item,
								value: forCondition[item]
							})
						}
					})
					if (arrKeys.indexOf('自设防') > -1) {
						arrDefense.push({
							name: '自设防',
							value: forCondition['自设防']
						})
					}
					console.log(arrDefense,'==');
				}
			}
			// 年代
			// if (age) {
			// 	arrYear.length = 0;
			// 	for (let key in age) {
			// 		arrYear.push({
			// 			name: key,
			// 			value: age[key] || null
			// 		})
			// 	}
			// 	// 排序
			// 	arrYear.sort((a, b) => {
			// 		return parseInt(a.name) >= parseInt(b.name) ? 1 : -1
			// 	})
			// }
			// 用途
			// if (use) {
			// 	arrUse.length = 0;
			// 	for (let key in use) {
			// 		arrUse.push({
			// 			name: key,
			// 			value: use[key] || null
			// 		})
			// 	}
			// 	// 排序
			// 	arrUse.sort((a, b) => {
			// 		return parseInt(a.name) >= parseInt(b.name) ? 1 : -1
			// 	})
			// }
			// 渲染设防情况图表
			renderChart(proxy.$refs.defenseChartsRef, arrDefense, colorsDefense);
			// 渲染年代图表
			// renderChart(proxy.$refs.yearChartsRef, arrYear, colorsYear, 15);
			// 渲染用途图表
			// renderChart(proxy.$refs.useChartsRef, arrUse, colorsUse, 30);
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData()
})
</script>

<style lang="scss" scoped>
.comprehensive-statistics {
	&-item:first-child {
		.comprehensive-statistics-title {
			margin-top: 13px;
		}
	}

	&-item:nth-child(2) {
		.comprehensive-statistics-title {
			border-top: 1px dashed #475ADB;
			padding-top: 10px;
		}
	}

	&-title {
		font-size: 16px;
		color: #FFFFFF;
		margin: 0 20px;
	}

	.echats-box {
		margin: 20px auto;
		width: 100%;
		// background: url('@/assets/images/vulnerability/bg_chart_pie.png') no-repeat left;
		// background-size: auto 130px;
		// background-position: 48px 10px;
	}
}

// 分辨率判断
@media screen and (max-width: 1919px) {
	.comprehensive-statistics {
		.echats-box {
			background-position: 48px 14px;
		}
	}
}
</style>